@charset "utf-8";
body{ background:#f3f5f7;}

/*列表页头部*/
.category-header { position:fixed;width:100%; height:44px; background:#fff;top:0; left:0;z-index:9999; border-bottom:1px solid #eee; box-sizing:border-box;}
.category-left{ position: absolute; left: 0; top: 0; width: 40px; height: 44px; }
.category-left a{ display:block; width:30px; height:50px;background:url(../images/top.png) no-repeat;background-size: auto 230px; background-position:5px 9px;}
.category-right{position: absolute;right: 0; top: 0; width: 40px; height: 44px; text-align:center;}
.category-right a{ font-size:14px; line-height:44px; color:#666}
.header-middle{ margin: 0 40px; height: 44px; font-size: 16px; text-align: center; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: none; width: auto;}
.search-box{ width:100%; margin:7px auto; height:30px;background: #f6f6f6;border-radius:15px; position:relative}
.search-box .text{ display:block; width:100%;-webkit-appearance: none; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border-radius: 0; -webkit-rtl-ordering: logical; -webkit-user-select: text; height:30px; background:none; border:0; font-size:14px; line-height:30px; color:#666;}
.search-box .submit{    display: block;width: 18px;height: 15px;background: url(../images/icon_category.png) no-repeat;background-position: -80px 0;background-size: 200px;margin:8px 5px 0 10px}
/*排序*/
.filtrate-term { width: 100%; overflow: hidden; background: #fff;position: fixed;top:44px; left:0px;z-index: 999; border-bottom:1px solid #eee;}
.filtrate-term  ul { width: 100%;overflow:hidden; height:40px; background:#fff;display: -webkit-box !important;display: box !important;position: relative;}
.filtrate-term  li {position: relative;-webkit-box-flex: 1;box-flex: 1;border-right: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;font-size:13px;text-align: center;line-height:40px; width:25%;}
.filtrate-term  li span{ display:block; color:#222;}
.icon-sort-price span:after ,.icon-screening span:after,.icon-sort span:after,.icon-sort span:after,span.choose-icon,.filtrate-more span a i{display: block;background: url(../images/icon_category.png) no-repeat;background-size: 200px 200px;}
.icon-sort-price span:after {content: "";display: inline-block;width: 8px;height: 10px;background-position: -170px -30px;    margin-left: 4px;}
.icon-sort-price.active span.icon-order-ASCending:after{content: "";display: inline-block;width: 8px;height: 10px;    background-position: -170px -15px;margin-left: 4px;}
.icon-sort-price.active span.icon-order-DESCending:after{content: "";display: inline-block;width: 8px;height: 10px;    background-position: -170px 0px;margin-left: 4px;}
.icon-sort span:after{content: "";display: inline-block;width: 8px;height: 7px;background-position: -10px -109px;    margin-left: 4px;}
.icon-sort.active span:after {content: "";display: inline-block;width: 8px;height: 7px;background-position: 0 -109px;margin-left: 4px;}
.filtrate-term  li span.choose-icon{background-position:3px -119px;width: 15px;height: 13px;display: inline-block !important;}
.filtrate-term  li.active span.choose-icon{background-position:-13px -119px;width: 15px;height: 13px;display: inline-block !important;}
.show-type,.show-list {background:url(../images/top.png) no-repeat;background-size: auto 230px;}
.show-type { display:block; width: 24px; height:24px;background-position:0px -121px;margin: 10px auto;}
.show-list{background-position:0px -76px;}
.show-position{ width:100%; background:#fff;}

/*更多筛选*/
.filtrate-more{ width:100%;background: rgba(0,0,0,0.1); position:fixed; top:84px; left:0; right:0; z-index:999;}
.filtrate-more span {background-color: #FFF;display: block;padding-left: 0.38rem;}
.filtrate-more span a {font-size: 0.6rem;line-height:20px;color: #666;display: block;height:20px;padding: 0.5rem 0.75rem 0.5rem 0.38rem;position:relative;}
.filtrate-more span a i{position: absolute;right: 1rem;top:0.5rem;background-size:135px 135px;background-position: -108px -38px;width: 13px;height: 10px; margin-top:5px;}
.filtrate-more span a:before{height: 1px;content: '';width: 100%;border-bottom: 1px solid #e3e5e9;position: absolute;top: -1px;left: 0;transform: scaleY(.5);-webkit-transform: scaleY(.5);z-index: 10;}


/*商品grid布局*/
.goods-list-grid{ width:100%; overflow:hidden; margin-top:84px; -webkit-overflow-scrolling:touch; }
.goods-list-grid.hide { display: none;}
.goods-list-grid .product{ background:#fff;}
.goods-list-grid li {height: 120px;position: relative;}
.goods-list-grid .item {display: -webkit-box;display: box;height: 100%;padding-top: 10px;font-size: 0px;}
.goods-list-grid li .item-tag-box{ width:40px; height:40px; position:absolute; top:0; left:0px; z-index:9}
.goods-list-grid li .item-tag-box span{ display:block; width:35px; height:35px;text-indent:-9999px; z-index:1;}
.goods-list-grid li .item-tag-box span.icon-best{ background:url(../images/icon_best.png) no-repeat; background-size:contain;}
.goods-list-grid li .item-tag-box span.icon-hot{ background:url(../images/icon_hot.png) no-repeat; background-size:contain;}
.goods-list-grid li .item-tag-box span.icon-new{  background:url(../images/icon_new.png) no-repeat; background-size:contain;}
.goods-list-grid li .item-pic{position: relative;height: 100px;width: 100px;margin-left: 10px;overflow: hidden;text-align: center;}
.goods-list-grid li .item-pic .pre-sale-tip{  position: absolute; left: 0px; bottom: 0px; width: 100%; height: 20px; line-height: 20px; font-size: 12px; text-align: center; color: #fff; background:rgba(233,59,61,.7); z-index: 1;}
.goods-list-grid li .item-pic .sell-out{width: 56px;height: 56px;margin-top: -28px;margin-left: -28px;background-size: 56px;}
.goods-list-grid li .item-pic a{ display:block; position:relative; width:100%;padding-top:100%;}
.goods-list-grid li .item-pic img{ display:block; width:100%; height:auto; position:absolute; left:0;top:0;}
.goods-list-grid li dl{-webkit-box-flex: 1;box-flex: 1;margin-left: 10px;position: relative;height: 100%;margin-top: -2px;
padding-right: 10px; height:110px;}
.goods-list-grid li dl dt{font-size: 15px;line-height: 20px;height:40px;overflow: hidden;}
.goods-list-grid li dl dt a{ display:block;color:#222;font-size: 15px;line-height: 20px;overflow: hidden; height:40px;}
.goods-list-grid li dd{font-size: 0px;height: 20px;overflow: hidden;width: 100%;line-height: 20px; margin:3px 0;}
.goods-list-grid li dd span{ display:block; float:left; font-size:10px; line-height:15px; color:#fff; padding-left:8px; padding-right:8px; background:#f23030; margin-left:5px; margin-top:8px;border-radius:3px;}
.goods-list-grid li dd span.gift{display: block;padding: 0 2px 0 2px;border-radius:2px;color: #fff;font-size: 11px;text-align: center; background:#f23030; margin-top:3px;}
.goods-list-grid li dd i{display:block; float:left; font-size:18px; line-height:20px;}
.goods-list-grid li dd em{ display:block; float:left; font-size:10px; line-height:30px; color:#999; padding-left:8px;text-decoration:line-through;}
.goods-list-grid li .item-con-info{ position:absolute; width:100%;overflow:hidden; background:#FFF; bottom:4px; left:0;}
.goods-list-grid li .item-con-info .cart-box {overflow: hidden; height:27px; display: block; min-width:80px; float:right; padding-right:5px; line-height:27px; z-index: 3;}
.goods-list-grid .sell-out-btn{ right:10px;}
.goods-list-grid .decrease { display:none;width:25px; float:right; height:25px;position:absolute; right:60px; top:0px; z-index:1;cursor:pointer; line-height:27px; background: #fff;}
.goods-list-grid .increase{ width:25px; height:25px;position:absolute; right:10px; top:0px; z-index:2; cursor:pointer; line-height:27px;}
.goods-list-grid .cart-box .num { border: 0; width:25px; height:25px;  text-align: center; font-size: 16px; line-height:25px; color: #999;  position:absolute; right:35px; top:0px ;}
.goods-list-grid .decrease.show{ display:inline;}
.goods-list-grid .decrease.hide{ display:none;}
.goods-list-grid .cart-box .num.show{ display:inline-block}
.goods-list-grid .cart-box .num.hide{ display:none;}
.goods-sales { display:block; position: absolute; top: 3px; left: 7px; z-index: 2; font-size:13px; color:#999;}
.goods-list-grid li dl a.shop-name{ margin:0 auto;}
.goods-list-grid dl:after {content: '';height: 1px;width: 200%;position: absolute;left: 0;top: auto;right: auto;bottom: -4px;background-color: #e3e5e9;border: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px;transform: scale(0.5);
-webkit-transform: scale(0.5);transform-origin: top left;-webkit-transform-origin: top left;}


/*商品list布局*/
.openList{ background:#f3f5f7;}
.openList li {width:50%; overflow:hidden; float:left; padding:0px;position:relative; float:left; height:auto; margin-bottom:5px;}
.openList li .item { display:block; width:98%; overflow:hidden; margin:auto; background:#fff; position:relative; padding-top:0px;}
.openList li .item-pic{ display:block; width:100%; height:100%; overflow:hidden;margin: 0 auto;}
.sell-out{position: absolute;width:90px;height:90px;top:50%;left: 50%; margin-top:-45px;margin-left: -45px;background: url(../images/shouqing.png) no-repeat; background-size:90px; z-index:2;}
.openList li .item-pic .sell-out{width:90px;height:90px; margin-top:-45px;margin-left: -45px; background-size:90px;}
.openList li .item-pic img{ display:block; width:100%; height:auto}
a.shop-name{ display:inline-block;margin:5px auto 0;line-height:18px; font-size:12px; color:#999; position:relative;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
a.shop-name i{ display:inline-block; vertical-align:middle; margin-right:3px; font-size:13px;}
.self-sell{color: #f23030;font-size: 9px;line-height: 10px;height: 10px;padding: 1px 2px 0px 3px;margin-right: 4px;position: relative;top: -1px;}
.self-sell:before{content: '';position: absolute;top: 0;left: 0;border: 1px solid #f23030;border-radius: 3px;transform: scale(.5,.5);-webkit-transform: scale(.5,.5);transform-origin: left top;-webkit-transform-origin: left top;box-sizing: border-box;width: 200%; height:200%;z-index: 1;}
.openList li dl{ width:96%; margin:auto; margin-top:8px; overflow:hidden; padding-left:2%; padding-right:2%; height:auto;}
.openList li dl dt{font-size:14px; width:100%; height:40px; overflow:hidden; }
.openList li dl dt a{font-size:14px; line-height:20px; color:#222;word-wrap: break-word;word-break: normal;white-space: normal;}
.openList li dd{width:100%;margin:5px 0; overflow:hidden}
.openList li dd i{ display:block; float:left; font-size:18px; line-height:20px;}
.openList li dd span{ display:block; float:left; font-size:10px; line-height:15px; color:#fff; padding-left:8px; padding-right:8px; background:#F00; margin-left:10px; margin-top:8px;border-radius:3px;}
.openList li dd .gift{display: block;padding: 0 2px 0 2px;border-radius:2px;color: #fff;font-size: 11px;margin-left:4px;float: left;height: 13px;line-height:13px;overflow: hidden;position: relative;margin-top:3px;text-align: center; background:#f23030;}
.openList li .item-con-info{ width:100%; margin:auto; overflow:hidden; background:#fff; padding-bottom:5px; position:relative;left:0px;bottom:0;}
.openList li .item-con-info .cart-box{overflow: hidden; height:27px; display: block;min-width:85px;float:right; position:relative; z-index: 3;}
.cart-box:hide{ display: none;}
.openList .decrease {width:25px; height:25px; position:absolute; right:55px; top:0px; z-index:1; cursor:pointer; background: #fff;}
.openList .increase{width:25px; height:25px;position:absolute; right:5px; top:0px; z-index:2; cursor:pointer;}
.sell-out-btn{width:25px; height:25px;position:absolute; right:5px; top:0px; z-index:2; cursor:pointer; color:#999 !important}
.openList .sell-out-btn{ right:5px;}
.increase-fly{ width:25px;height:25px;background-color: rgba(255, 255, 255, 0.95);border: 1px solid #C5C5C5;border-radius: 50%;font-size:24px; line-height:25px;color:#F8849C;background: url(../images/shop-cart.png) no-repeat -25px -27px; background-size: 60px;text-indent:-9999px;position: fixed;z-index: 9999;}
.openList .cart-box .num { display: inline-block; border: 0; width:25px; height:25px; float:right; text-align: center; font-size: 16px; line-height:25px; color: #999;  text-align: center; position:absolute; right:30px; top:0px ;}
.openList .decrease.show{ display:inline;}
.openList .decrease.hide{ display:none;}
.openList .cart-box .num.show{ display:inline-block}
.openList .cart-box .num.hide{ display:none;}
.openList .goods-sales { display:block;position: absolute;left:0px; z-index: 2; font-size:13px; color:#999; line-height:25px;}


/*===筛选弹出层====*/
.category-content-section{z-index:1;}
.filtrate-pop-section{-ms-flex-direction: column;-webkit-box-orient: vertical;box-orient: vertical;-webkit-flex-direction: column;flex-direction: column;width: 100%;
height: 100%;position:fixed;top: 0;right: 0;-webkit-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0);-webkit-transition: all .3s linear;
transition: all .3s linear;z-index:10000;}
.filtrate-pop-section.show{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);-webkit-transition: all .3s linear;transition: all .3s linear;}
.mask-content{width: 100%;height: 100%;min-height: 100%;position: absolute;left: 0;top: 0;background: rgba(0,0,0,0.5);
z-index: 100;}
.close-filter-content{ width:13%;background: rgba(0,0,0,0.6); position:absolute; left:0; top:0; bottom:0;olor: #fff;font-size:0.6rem;text-align: center; z-index:101;}
.close-filter-content .close-btn{position: absolute;top: 50%;margin-top: -2rem; width:100%;}
.close-filter-content .close-btn i{font-size:1rem;display: block; color:#fff; margin-bottom:0.1rem;}
.close-filter-content .close-btn span{ color:#fff;}
.sidebar-content {position: absolute;top: 0px;right:0px;width:87%;height: 100%; overflow:hidden;z-index: 105;background:#f3f5f7;}
#filter_content {height: 100%;overflow-y: scroll; margin-bottom:60px;}
/*新增筛选样式*/
.ui-slider-range {position: absolute;z-index: 1;display: block;  border: 0;background-position: 0 0; height:0.5rem}
.price-select-info .ui-slider-handle{ position:absolute; z-index:2;height:1.4rem;width:1.4rem;top: -0.45rem;margin-left: -0.85rem;border-radius: 50%;border: 1px solid #efefef;background: #fff;}
.price-select-info .ui-slider-handle.ui-state-hover, .price-select-info .ui-slider-handle.ui-state-focus{border:1px solid #fd778b; background:#ffe7eb}	
.price-box{ padding:0.5rem; background:#fff; border-bottom:0.05rem solid #eee; margin-top:0.5rem;}
.price-box label{ font-size:0.7rem; color:#222;}
.price-select{padding:0.65rem 0.85rem;margin-top:1.8rem;position: relative;}
.price-select-info{ position:relative;background: #efefef;border-radius: 0;height:0.5rem;border: 0;}
.price-select-info .current-price-range {position: absolute; top:0; height:100%;z-index: 1;font-size:0.5rem;display: block;border: 0;background:#f23030;}
.price-select-info .price-select-handle { position:absolute; z-index:2;height:1.4rem;width:1.4rem;top: -0.45rem;margin-left: -0.85rem;border-radius: 50%;border: 1px solid #efefef;background: #fff;}
.price-info {position: absolute;z-index: 2;background: #fff;font-size:0.65rem;left: 34%;top: -40px;border: 1px solid #efefef;color: #666;padding:0.1rem 0.2rem;border-radius: 4px;}
.price-info:before {content: " ";width:0.5rem;height:0.5rem;display: block;position: absolute;border-top: 1px solid #efefef;border-right: 1px solid #efefef;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);background: #fff;bottom:-0.3rem;z-index: -1;left: 50%;margin-left: -0.325em;}
.filtrate-list{ margin-top:0.5rem; padding:0 0.5rem;background:#fff; border-top:0.05rem solid #eee; border-bottom:0.05rem solid #eee; height:2rem;}
.filtrate-list a{ display:block; height:2rem;}
.filtrate-list a label{ float:left; line-height:2rem; font-size:0.7rem; color:#222;}
.filtrate-list a span{ float:right; line-height:2rem; font-size:0.65rem; color:#666;}
.filtrate-list a span i{ display:inline-block; font-size:0.7rem; color:#666; margin-left:0.1rem;transition: all .2s;}
.filtrate-list.active a span i{-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);
transform: rotate(90deg);}
.attr-lists{ padding:0;} 
.base-filter,.attr-info-ul{ background:#fff; text-align:left; padding:0 0.5rem 0.5rem; display:none;}
.base-filter.show{ display:block;}
.base-filter-title{ background:#fff; line-height:2rem; font-size:0.7rem; color:#222; padding-left:0.5rem;}
.base-filter li,.attr-info-ul li{display: inline-block; width:29%; box-sizing:border-box; height:1.5rem; line-height:1.5rem;margin:0.5rem 0 0 2.5%;font-size: 0.55rem;color: #666;background: #FFF;border: solid 0.05rem #EEE;border-radius: 0.15rem; text-align:center; overflow:hidden;}
.base-filter li.cur,.attr-info-ul li.cur{border-width: 0.05rem; border-style:solid;}
.base-filter li.hide,.attr-info-ul li.hide{ display:none}
.filter-footer{position:absolute;bottom: 0px;background: #fff;right: 0px; width:100%;}
.filter-footer a,.filter-footer .btn-submit{ display:inline-block; width:50%; height:2.25rem; line-height:2.25rem; font-size:16px;}
.filter-footer a{ background:#fff; border-top:1px solid #efefef;text-align:center; color:#222; font-size:16px; float:left; box-sizing:border-box;}
.filter-footer .btn-submit{border:none; color:#fff; float:right;}
.page-num {width: 100%;position: fixed;left: 0;bottom:60px;z-index: 100; text-align:center;}
.page-num span {width:60px;display:block;padding:0px 8px;text-align: center;font-size:10px;margin-left: auto;margin-right: auto;background-color: rgba(0,0,0,0.5);border-radius: 10px;color:#fff; height:16px; line-height:16px;box-sizing:border-box;}